<template>
  <header class="header">
    <div class="header_left"></div>
    <div class="header_ipt">
      <input type="search" placeholder="输入城市景点/游玩/主题" />
    </div>
    <router-link to="/city" >
      <div class="header_right">{{ cityStore.city }}</div>
    </router-link>
  </header>
</template>

<script setup>
import { useCityStore } from '@/stores/cityStore.js'
const cityStore = useCityStore()
// onMounted(() => {
//   cityStore.changeCity()
// })
</script>

<style lang="scss" scoped>
// body 的 font-size 为 50px
.header {
  display: flex;
  height: $headerHeight;
  line-height: $headerHeight;
  // background-color: #00bcd4;
  background-color: $bgColor;
  color: #fff;
  .header_left {
    width: .64rem;
    &::before {
      display: inline-block;
      content: "\e624";
      font-family: "iconfont";
      text-align: center;
      font-size: $titleFontSize;
      padding-left: .1rem;
    }
  }
  .header_ipt {
    position: relative;
    flex: 1;
    line-height: .64rem;
    background-color: #fff;
    border-radius: .1rem;
    color: #666;
    margin: .12rem .2rem .12rem 0;
    input {
      width: 100%;
      font-family: "PingFang SC";
      padding: 0rem .2rem;
      padding-left: .7rem; // 预留给左边 icon 的空间
      height: .64rem;
      border-radius: .1rem;
    }
    &::before {
      display: inline-block;
      content: "\e632";
      font-family: "iconfont";
      position: absolute;
      top: 50%;
      left: .1rem;
      transform: translateY(-50%);
      width:.64rem;
      height:.64rem;
      line-height:.64rem;
      text-align: center;
    }
  }
  .header_right {
    box-sizing: border-box;
    // min-width: 2rem;
    padding-right: .7rem;
    position: relative;
    color: #fff;
    font-size: .36rem;
    &::after {
      display: inline-block;
      content: "\e64a";
      font-family: "iconfont";
      position: absolute;
      top: 0;
      right: .2rem;
    }
  }
}
</style>
